<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Support Ticket </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Data Table-->
	<link rel="stylesheet" type="text/css" href="../../../assets/vendor_components/datatable/datatables.min.css"/>
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->


</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Tickets
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Tickets</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
	  <div class="row">
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Tickets</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-info">2,064</div>
                  <span class="text-muted">Total Tickets</span>
                </div>
              </div>

              <div class="card-body bg-gray-light py-12">
                <span class="text-muted mr-1">Completed:</span>
                <span class="text-dark">16</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-info" role="progressbar" style="width: 45%; height: 3px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
			
				
        <div class="col-xl-3 col-md-6 col-12 ">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Responded</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-red">1,738</div>
                  <span class="text-muted">Responded</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Yesterday's overdue:</span>
                <span class="text-dark">9</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-danger" role="progressbar" style="width: 52%; height: 3px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->

        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Resolve</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-purple">1100</div>
                  <span class="text-muted">Open</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Closed today:</span>
                <span class="text-dark">16</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-purple" role="progressbar" style="width: 75%; height: 3px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
        <div class="col-xl-3 col-md-6 col-12">
          	<div class="box">
              <div class="box-body">
                <div class="flexbox">
                  <h5>Pending</h5>
                  <div class="dropdown">
                    <span class="dropdown-toggle no-caret" data-toggle="dropdown"><i class="ion-android-more-vertical rotate-90"></i></span>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item" href="#"><i class="ion-android-list"></i> Details</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-add"></i> Add new</a>
                      <a class="dropdown-item" href="#"><i class="ion-android-refresh"></i> Refresh</a>
                    </div>
                  </div>
                </div>

                <div class="text-center my-2">
                  <div class="font-size-60 text-success">964</div>
                  <span class="text-muted">Pending</span>
                </div>
              </div>

              <div class="box-body bg-gray-light py-12">
                <span class="text-muted mr-1">Implemented:</span>
                <span class="text-dark">26</span>
              </div>

              <div class="progress progress-xxs mt-0 mb-0">
                <div class="progress-bar bg-success" role="progressbar" style="width: 65%; height: 3px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
            </div>
        </div>
        <!-- /.col -->
		  
      </div>	

      <div class="row">
			<div class="col-12">
				<div class="box">
					<div class="box-header with-border">						
						<h4 class="box-title">Support Ticket List</h4>
						<h6 class="box-subtitle">List of ticket opend by customers</h6>
					</div>
					<div class="box-body">						
						<div class="table-responsive">
							<table id="tickets" class="table mt-0 table-hover no-wrap table-striped table-bordered" data-page-size="10">
								<thead>
									<tr class="bg-dark">
										<th>ID #</th>
										<th>Opened By</th>
										<th>Cust. Email</th>
										<th>Sbuject</th>
										<th>Status</th>
										<th>Assign to</th>
										<th>Date</th>
										<th>Action</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1011</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/1.jpg" alt="user" class="avatar avatar-sm mr-5" /> Sophia</a>
										</td>
										<td>sophia@gmail.com</td>
										<td>How to customize the template?</td>
										<td><span class="label label-warning">New</span> </td>
										<td>Elijah</td>
										<td>14-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1224</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/2.jpg" alt="user" class="avatar avatar-sm mr-5" /> William</a>
										</td>
										<td>william@gmail.com</td>
										<td>How to change colors</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Benjamin</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1024</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/3.jpg" alt="user" class="avatar avatar-sm mr-5" /> Jayden</a>
										</td>
										<td>jayden@gmail.com</td>
										<td>How to set Horizontal nav</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>2124</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/4.jpg" alt="user" class="avatar avatar-sm mr-5" /> Ethan</a>
										</td>
										<td>ethan@gmail.com</td>
										<td>How this will connect with ethan</td>
										<td><span class="label label-inverse">Pending</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>3124</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/5.jpg" alt="user" class="avatar avatar-sm mr-5" /> Noah</a>
										</td>
										<td>noah@gmail.com</td>
										<td>How to set navigation</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1611</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/6.jpg" alt="user" class="avatar avatar-sm mr-5" /> Sophia</a>
										</td>
										<td>sophia@gmail.com</td>
										<td>How to customize the template?</td>
										<td><span class="label label-warning">New</span> </td>
										<td>Elijah</td>
										<td>14-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>4224</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/7.jpg" alt="user" class="avatar avatar-sm mr-5" /> William</a>
										</td>
										<td>william@gmail.com</td>
										<td>How to change colors</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Benjamin</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>2524</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/8.jpg" alt="user" class="avatar avatar-sm mr-5" /> Jayden</a>
										</td>
										<td>jayden@gmail.com</td>
										<td>How to set Horizontal nav</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>7524</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/9.jpg" alt="user" class="avatar avatar-sm mr-5" /> Ethan</a>
										</td>
										<td>ethan@gmail.com</td>
										<td>How this will connect with ethan</td>
										<td><span class="label label-inverse">Pending</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>4124</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/2.jpg" alt="user" class="avatar avatar-sm mr-5" /> Noah</a>
										</td>
										<td>noah@gmail.com</td>
										<td>How to set navigation</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1011</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/1.jpg" alt="user" class="avatar avatar-sm mr-5" /> Mia</a>
										</td>
										<td>sophia@gmail.com</td>
										<td>How to customize the template?</td>
										<td><span class="label label-warning">New</span> </td>
										<td>Elijah</td>
										<td>14-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1224</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/3.jpg" alt="user" class="avatar avatar-sm mr-5" />Chloe</a>
										</td>
										<td>william@gmail.com</td>
										<td>How to change colors</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Benjamin</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>8024</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/4.jpg" alt="user" class="avatar avatar-sm mr-5" /> Chloe</a>
										</td>
										<td>jayden@gmail.com</td>
										<td>How to set Horizontal nav</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>5124</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/5.jpg" alt="user" class="avatar avatar-sm mr-5" /> Ethan</a>
										</td>
										<td>ethan@gmail.com</td>
										<td>How this will connect with ethan</td>
										<td><span class="label label-inverse">Pending</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>3144</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/6.jpg" alt="user" class="avatar avatar-sm mr-5" /> Noah</a>
										</td>
										<td>noah@gmail.com</td>
										<td>How to set navigation</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>1621</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/7.jpg" alt="user" class="avatar avatar-sm mr-5" /> Sophia</a>
										</td>
										<td>sophia@gmail.com</td>
										<td>How to customize the template?</td>
										<td><span class="label label-warning">New</span> </td>
										<td>Elijah</td>
										<td>14-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>4724</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/8.jpg" alt="user" class="avatar avatar-sm mr-5" /> William</a>
										</td>
										<td>william@gmail.com</td>
										<td>How to change colors</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Benjamin</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>2594</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/9.jpg" alt="user" class="avatar avatar-sm mr-5" /> Jayden</a>
										</td>
										<td>jayden@gmail.com</td>
										<td>How to set Horizontal nav</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>13-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>7524</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/1.jpg" alt="user" class="avatar avatar-sm mr-5" /> Ethan</a>
										</td>
										<td>ethan@gmail.com</td>
										<td>How this will connect with ethan</td>
										<td><span class="label label-inverse">Pending</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
									<tr>
										<td>4124</td>
										<td>
											<a href="javascript:void(0)"><img src="../../../images/avatar/4.jpg" alt="user" class="avatar avatar-sm mr-5" /> Noah</a>
										</td>
										<td>noah@gmail.com</td>
										<td>How to set navigation</td>
										<td><span class="label label-success">Complete</span> </td>
										<td>Andrew</td>
										<td>12-10-2017</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger-outline" data-toggle="tooltip" data-original-title="Delete"><i class="ti-trash" aria-hidden="true"></i></button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->


</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- This is data table -->
    <script src="../../../assets/vendor_components/datatable/datatables.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	<!-- 洲博通 for Data Table -->
	<script src="../../js/pages/data-table.js"></script>
	
	
</body>
</html>
